<template>
  <div class="msg-page">
    <!-- header -->
    <van-nav-bar title="对话详情" left-arrow @click-left="$router.go(-1)">
      <template #right>
        <span class="send" @click="show = true">发送信息</span>
      </template>
    </van-nav-bar>

    <!-- body -->
    <div class="body">
      <div
        class="msg-item"
        v-for="m in msgList"
        :key="m.messageDate"
      >
        <div class="item-right">
          <img
            :src="`https://file.ituring.com.cn/SmallCover/${m.senderUserAvatarImageKey}`"
            :alt="m.receiverUserAvatarImageKey"
          />
        </div>
        <div class="item-left">
          <div class="item-top">
            <div class="top-left">
              <p class="name">{{ m.senderUserNickName }}</p>
              <p class="time">
                {{ m.messageDate?.substring(0, 10) }}
                {{ m.messageDate?.substring(11, 19) }}
              </p>
            </div>
          </div>
          <div class="main">
            <p>{{ m.body }}</p>
          </div>
        </div>
        <!-- 弹窗 -->
        <van-dialog v-model="show" show-cancel-button @confirm="send(m.receiverUserId)">
          <p class="send">
            {{ `发消息给${m.receiverUserNickName} : ` }}
          </p>
          <textarea
            v-model="msg"
            id=""
            cols="35"
            rows="5"
            placeholder="填写消息内容"
          ></textarea>
        </van-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { Dialog } from "vant";
import { DialogueAPI, CorrespondAPI } from "@/apis";
export default {
  props: ["id"],
  data() {
    return {
      page: 1,
      msgList: [],
      // 弹窗
      show: false,
      msg: "",
    };
  },
  mounted() {
    this.getMsg();
  },
  watch:{
    msgList(old,current){
      if(old != current){
        this.getMsg()
      }
    }
  },
  methods: {
    // 网络请求
    async getMsg() {
      // 主要网络请求
      let { data } = await this.$http.post(
        DialogueAPI(this.id, this.page),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
      this.msgList = data.messages;
    },
    // 发送信息
    async send(id) {
      console.log(id);
      await this.$http.post(
        CorrespondAPI(this.msg, id),
        {},
        {
          headers: {
            Authorization:
              "bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiLoi6bnk5xfNzAwNiIsImp0aSI6IjYwODAyNiIsIlVzZXJJZCI6IjYwODAyNiIsImlhdCI6IjIwMjMvMi82IDEyOjI2OjE2IiwibmJmIjoxNjc1Njg2Mzc2LCJleHAiOjE2NzgyNzgzNzYsImlzcyI6Iml0dXJpbmciLCJhdWQiOiJpdHVyaW5nIiwicm9sZXMiOltdfQ.TLGvCrKh6nWkN6L3OYbsOVmLvPXB_-DL2cP_82FDozk",
          },
        }
      );
    },
  },
  components: {
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>

<style lang="scss" scoped>
.msg-page {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  z-index: 999;
  .van-nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1999;
    padding: 2px 0;
    .send {
      color: var(--theme-blue);
      font-size: 16px;
      line-height: 21px;
    }
  }
  .body {
    padding: 50px 15px;
    .msg-item {
      padding: 15px 0;
      display: flex;
      justify-content: space-between;
      font-size: 14px;
      color: var(--book-name-font-black);
      .item-left {
        width: 285px;
        .item-top {
          display: flex;
          justify-content: space-between;
          .top-left {
            .name {
              line-height: 20px;
            }
            .time {
              line-height: 23px;
              color: var(--more-font-grey);
            }
          }
        }
        .main {
          background-color: #f8f8f8;
          line-height: 24px;
          padding: 10px 15px;
          margin-top: 5px;
        }
      }
      .item-right {
        img {
          width: 40px;
          height: 40px;
          border-radius: 20px;
        }
      }
    }
    p.send {
      margin: 20px 0 0 20px;
      font-size: 14px;
      line-height: 19px;
      color: var(--book-name-font-black);
    }
    textarea {
      margin: 20px 0 0 20px;
      font-size: 14px;
      line-height: 19px;
      border: none;
      outline: none;
    }
  }
}
</style>